<!-- 角色管理 -->
<div class="wrapper">
	<!-- second-nav -->
	<!-- <div ng-include="'main/admin/nav.html'"></div> -->
	<!-- wrapper-content -->
	<section class="wrapper-content">
		<div class="container-fluid">
			<h2 class="content-title"><span class="margin-right-10">角色管理</span><small>角色列表</small></h2>
		</div>
		<!-- btn-row -->
		<div class="btn-row clearfix">
			<div class="col-md-6">
				<button class="btn btn-primary" ng-click="openAdd()">添加</button>
			</div>
		</div>
		<!-- ng-table-row -->
		<div class="row">
			<div class="container-fluid">
				<div class="col-md-12">
					<table class="table table-bordered" ng-table="roleList">
						<tr ng-repeat="item in $data">
							<td title="'名称'" sortable="'name'">{{item.name}}</td>
							<td title="'描述'" sortable="'description'">{{item.description}}</td>
							<td title="'操作'">
								<div class="btn-group">
	                                <button href="javascript:void(0);" ng-click="openEdit(item);" class="btn btn-sm btn-success" title="编辑"><i class="fa fa-pencil"></i></button>
	                                <button href="javascript:void(0);" ng-click="openDel(item);" class="btn btn-sm btn-warning" title="删除"><i class="fa fa-times"></i></button>
	                            </div>
							</td>
						</tr>
					</table>
					<div class="row">
						<div class="col-md-6">
							<div class="pull-left btn btn-default">总数：<span class="badge">{{ totalRow }}</span></div>	
						</div>
						<div class="col-md-6">
							<!-- 分页 -->
							<nav>
								<ul class="pagination ng-table-pagination fr">
									<li>
										<a ng-click="previous()"><span>上一页</span></a>
									</li>
									<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
										<a ng-click="getRoleList(page)">{{ page }}</a>
									</li>
									<li>
										<a ng-click="next()"><span>下一页</span></a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
		

		<!-- 新增 addUserModel -->
		<div class="modal" id="addRoleModel" tabindex="-1" role="dialog" aria-labelledby="addRoleModel" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        				<h3 class="modal-title">新建角色</h3>
					</div>
					<div class="modal-body">
						<div class="form-horizontal">
							<!-- 用户名 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputName">名称</label>
								</div>
								<div class="col-md-7">
									<div><input id="inputName" name="inputName" class="form-control" placeholder="名称" type="text" ng-model="newRoleItem.name" ng-change="watchName('new')"></div>
								</div>
								<div class="col-md-2 text-danger" ng-bind="newRoleItem.warn.name"></div>
							</div>
							<!-- 角色描述 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputdescription">角色描述</label>
								</div>
								<div class="col-md-7">
									 <textarea class="form-control" name="inputdescription" id="inputdescription" ng-model="newRoleItem.description" placeholder="角色描述"></textarea>
						        </div>
							</div>
							<!-- 分配权限 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputdescription">分配权限</label>
								</div>
								<div class="col-md-7">
									<div class="col-md-4" ng-repeat="first in newRoleItem.permissionList">
										<p class="text-info">{{first.name}}</p>
										<div ng-repeat="second in first.sonPermission">
											<div style="position: relative;">
												<input ng-attr-id="check{{second.permissionId}}" type="checkbox" ng-model="second.check">
												<label title="" ng-attr-for="check{{second.permissionId}}">{{second.name}}</label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 分配用户 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="false" class="text-danger">*</span>
								    <label for="">分配角色</label>
								</div>
								<div class="col-md-7">
									<ui-select multiple ng-model="newRoleItem.userList" theme="bootstrap" close-on-select="false" title="选择角色">
										<ui-select-match placeholder="请选择">
											<span ng-bind="$item.name"></span>
										</ui-select-match>
										<ui-select-choices repeat="data in userList | filter:$select.search">
										    <span ng-bind="data.name"></span>
										</ui-select-choices>
									</ui-select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="addRole()">提交</button>
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 删除 delRoleModel -->
		<div class="modal" id="delRoleModel" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        				<h3 class="modal-title">删除用户</h3>
					</div>
					<div class="modal-body">
						<p class="text-danger text-center">删除角色将造成相关用户权限丢失，请确认是否继续删除。</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="delRole()">确认</button>
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 修改 editRoleModel -->
		<div class="modal" id="editRoleModel" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        				<h3 class="modal-title">编辑角色</h3>
					</div>
					<div class="modal-body">
						<div class="form-horizontal">
							<!-- 用户名 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputName">名称</label>
								</div>
								<div class="col-md-7">
									<div><input id="inputName" name="inputName" class="form-control" placeholder="名称" type="text" ng-model="modRoleItem.name" ng-change="watchName('edit')"></div>
								</div>
								<div class="col-md-2 text-danger" ng-bind="modRoleItem.warn.name"></div>
							</div>
							<!-- 角色描述 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputdescription">角色描述</label>
								</div>
								<div class="col-md-7">
									 <textarea class="form-control" name="inputdescription" id="inputdescription" ng-model="modRoleItem.description" placeholder="角色描述"></textarea>
						        </div>
							</div>
							<!-- 分配权限 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="true" class="text-danger">*</span>
								    <label for="inputdescription">分配权限</label>
								</div>
								<div class="col-md-7">
									<div class="col-md-4" ng-repeat="first in modRoleItem.permissionList">
										<p class="text-info">{{first.name}}</p>
										<div ng-repeat="second in first.sonPermission">
											<div style="position: relative;">
												<input ng-attr-id="check{{second.permissionId}}" type="checkbox" ng-model="second.check">
												<label title="" ng-attr-for="check{{second.permissionId}}">{{second.name}}</label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 分配用户 -->
							<div class="form-group">
								<div class="control-label col-md-3">
								    <span ng-show="false" class="text-danger">*</span>
								    <label for="">分配角色</label>
								</div>
								<div class="col-md-7">
									<ui-select multiple ng-model="modRoleItem.userList" theme="bootstrap" close-on-select="false" title="选择角色">
										<ui-select-match placeholder="请选择">
											<span ng-bind="$item.name"></span>
										</ui-select-match>
										<ui-select-choices repeat="data in userList | filter:$select.search">
										    <span ng-bind="data.name"></span>
										</ui-select-choices>
									</ui-select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="editRole()">提交</button>
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 提示 infoModel -->
		<info-modal msg="msg" visible="visible"></info-modal>
	</section>
</div>